<template>
  <div class="home train-home">
    <div class="container xd-LearningHome-PersonalCenter">
      <!-- 我的提问 -->
      <div class="card">
        <div class="card-title">
          <span class="title-value">我的提问</span> 
        </div>
        <div class="card-content">
          <div class="content-header"> 
            <div class="header-search">
              <el-input
                class="search-cell"
                v-model="currentCurriculumTitle"
                placeholder="标题"
                clearable
                style="width: 300px"
              ></el-input>
              <el-select
                class="search-cell"
                v-model="currentCurriculumStatus"
                placeholder="类型"
                clearable
              >
                <el-option
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
              <!-- <el-date-picker
                class="search-cell"
                v-model="curriculumDateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker> -->
              <el-button class="search" @click="myPsychicQuestion"
                >搜索</el-button
              >
            </div>
          </div>
          <div class="content-body">
            <el-table :data="curriculumList" style="width: 100%" stripe border>
              <el-table-column
                prop="questionTitle"
                label="标题"
                align="center"
              ></el-table-column> 
              <el-table-column
                prop="questionContent"
                label="内容"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="questionTypeText"
                label="类型"
                align="center"
                width="80"
              ></el-table-column>
              
              <el-table-column
                prop="createTime"
                label="提问时间"
                align="center"
                width="100"
              ></el-table-column>
            </el-table>
          </div>
          <div class="content-footer">
            <el-pagination
              @size-change="curriculumSizeChange"
              @current-change="curriculumPageChange"
              :current-page="curriculumForm.page"
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="curriculumForm.size"
              :layout="PAGE_LAYOUT"
              :total="curriculumForm.total"
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 我的回答 -->
      <div class="card">
        <div class="card-title">
          <span class="title-value">我的回答</span>
          <!-- <span class="title-desc">
            共
            <span class="desc-value">{{ examMap.examNum || 0 }}</span
            >次
          </span> -->
        </div>
        <div class="card-content">
          <div class="content-header"> 
            <div class="header-search">
              <el-input
                class="search-cell"
                v-model="currentExamTitle"
                placeholder="内容"
                clearable
                style="width: 300px"
              ></el-input> 
              <el-date-picker
                class="search-cell"
                v-model="examDateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <el-button class="search" @click="myAnswerList"
                >搜索</el-button
              >
            </div>
          </div>
          <div class="content-body">
            <el-table :data="examList" style="width: 100%" stripe border>
              <el-table-column
                prop="examTitle"
                label="标题"
                align="left"
                header-align="center"
              ></el-table-column>
               <el-table-column
                prop="userScore"
                label="回答内容"
                align="center"
                width="100"
              ></el-table-column>
             
              <el-table-column
                prop="examCreateTime"
                label="回答时间"
                align="center"
                width="200"
              ></el-table-column>  
            </el-table>
          </div>
          <div class="content-footer">
            <el-pagination
              @size-change="examSizeChange"
              @current-change="examPageChange"
              :current-page="examForm.page"
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="examForm.size"
              :layout="PAGE_LAYOUT"
              :total="examForm.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const examStatusOptions = [
  {
    label: "未完成",
    value: 0,
  },
  {
    label: "已完成",
    value: 1,
  },
];

const curriculumStatusOptions = [
  {
    label: "未完成",
    value: 0,
  },
  {
    label: "已完成",
    value: 1,
  },
];

const pointTypeOptions = [
  {
    label: "课程学习",
    value: 1,
  },
  {
    label: "课后练习",
    value: 2,
  },
  {
    label: "统一考试",
    value: 3,
  },
  {
    label: "闯关",
    value: 4,
  },
  {
    label: "登录",
    value: 5,
  },
  {
    label: "课程评论",
    value: 6,
  },
  {
    label: "学习心得",
    value: 7,
  },
  {
    label: "查看通知公告",
    value: 8,
  },
  {
    label: "查看政工要闻",
    value: 9,
  },
];

// function sliceList(list) {
//   let result = [];
//   if (list.length > 5) {
//     result = list.slice(0, 5)
//   } else {
//     result = list
//   }
//   return result
// }

export default {
  name: "PersonalCenter",
  data() {
    return {
      icons: {
        pass: require("@/assets/imgs/green_icon_pass.png"),
        finished: require("@/assets/imgs/green_icon_finished.png"),
        joined: require("@/assets/imgs/green_icon_joined.png"),
        unfinished: require("@/assets/imgs/green_icon_unfinished.png"),
      },
      examForm: {
        page: 1,
        size: 10,
        total: 1,
      },
      curriculumForm: {
        page: 1,
        size: 10,
        total: 1,
      },
      pointForm: {
        page: 1,
        size: 10,
        total: 1,
      },
      currentExamTitle: "",
      currentExamStatus: "",
      examMap: {},
      examList: [],
      examStatusOptions: examStatusOptions,
      examDateRange: null,
      currentCurriculumTitle: "",
      currentCurriculumStatus: "",
      curriculumMap: {},
      curriculumList: [],
      curriculumStatusOptions: curriculumStatusOptions,
      curriculumDateRange: null,
      currentPointType: "",
      pointMap: {},
      pointList: [],
      pointTypeOptions: pointTypeOptions,
      pointDateRange: null,
      activeName: "first",
      todoList: [],
      todoForm: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      themeTypeList: [
        {
          dictValue: "",
          dictLabel: "全部类别",
        },
        {
          dictValue: "1",
          dictLabel: "原生家庭",
        },
        {
          dictValue: "2",
          dictLabel: "强许",
        },
        {
          dictValue: "3",
          dictLabel: "抑郁",
        },
        {
          dictValue: "4",
          dictLabel: "心理咨询",
        },
        {
          dictValue: "5",
          dictLabel: "自卑",
        },
        {
          dictValue: "6",
          dictLabel: "分手",
        },
        {
          dictValue: "7",
          dictLabel: "恋爱",
        },
        {
          dictValue: "8",
          dictLabel: "失眠",
        },
      ],
    };
  },
  created() {
    this.$store.commit("updateActiveMenu", "/Cinziqao/PersonalCenter");
    if (this.$route.query.tabName) {
      this.activeName = this.$route.query.tabName;
    }
    this.myAnswerList();
    this.myPsychicQuestion();  
  },
  methods: { 
    curriculumSizeChange(val) {
      this.curriculumForm.size = val;
      this.myPsychicQuestion();
    },
    curriculumPageChange(val) {
      this.curriculumForm.page = val;
      this.myPsychicQuestion();
    },
    examSizeChange(val) {
      this.examForm.size = val;
      this.myAnswerList();
    },
    examPageChange(val) {
      this.examForm.page = val;
      this.myAnswerList();
    }, 
    splitDate(value) {
      return ~value.indexOf(" ") ? value.split(" ")[0] : values;
    },
    myAnswerList() {
      utils.post(
        "/psychic/psychicQuestion/myAnswerList",
        {
          examTitle: this.currentExamTitle,
          examStatus: this.currentExamStatus,
          startTime: this.examDateRange ? this.examDateRange[0] : "",
          endTime: this.examDateRange ? this.examDateRange[1] : "",
          pageNumber: this.examForm.page,
          pageSize: this.examForm.size,
        },
        (res) => {
          if (res.success) { 
            this.examMap = res.data.examMap;
            this.examList = res.data.examList.rows.map((item) => {
              const value = examStatusOptions.find((element) => {
                return element.value === item.examStatus;
              });
              item.statusText = value ? value.label : "";
              return item;
            });
            this.examForm.total = res.data.examList.total;
          }
        }
      );
    },
    myPsychicQuestion() {
      var that = this;
      utils.post(
        "/psychic/psychicQuestion/myList",
        {
          questionTitle: this.currentCurriculumTitle,
          questionType: this.currentCurriculumStatus,
          startTime: this.curriculumDateRange
            ? this.curriculumDateRange[0]
            : "",
          endTime: this.curriculumDateRange ? this.curriculumDateRange[1] : "",
          pageNumber: this.curriculumForm.page,
          pageSize: this.curriculumForm.size,
        },
        (res) => { 
          if (res.success) { 
              this.curriculumList = res.data.rows.map((item) => {
              const value = that.themeTypeList.find((element) => {
                return element.dictValue === item.questionType;
              });
              item.questionTypeText = value ? value.dictLabel : "";
              return item;
            }); 
            this.curriculumForm.total = res.data.total;
          }
        }
      );
    },    
  },
};
</script>
<style lang="less">
@primary-color: #cb2c21;
@border-color: #cacaca;
@white-color: #ffffff;
@grey-color: #666666;

.xd-LearningHome-PersonalCenter {
  .text-primary {
    color: #cb2c21;
  }
  .card {
    border: 1px solid @border-color;
    margin-bottom: 20px;
    background-color: @white-color;
    &:first-child {
      margin-top: 10px;
    }
    .card-title {
      padding: 14px 32px 0 32px;
      border-bottom: 1px solid @border-color;
      .title-value {
        display: inline-block;
        font-size: 18px;
        color: @primary-color;
        border-bottom: 3px solid @primary-color;
        padding-bottom: 15px;
        margin-right: 32px;
      }
      .title-desc {
        color: @grey-color;
        .desc-value {
          color: @primary-color;
        }
      }
    }
    .card-content {
      .content-header {
        border-bottom: 1px solid @border-color;
        padding: 30px 64px;
        .header-result {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 33px;
          .media-card {
            display: flex;
            flex: 1;
            flex-direction: row;
            .media-image {
              width: 50px;
              height: 50px;
              margin-right: 22px;
            }
            .media-body {
              display: flex;
              flex-direction: column;
              color: @primary-color;
              .media-text {
                font-size: 18px;
              }
              .media-title {
                color: @grey-color;
                margin-top: 8px;
              }
            }
          }
        }
        .header-search {
          display: flex;
          flex-direction: row;
          .search-cell {
            margin-right: 32px;
            *::-webkit-input-placeholder {
              color: @primary-color;
            }
            .el-input__inner {
              color: @primary-color;
            }
            .el-range-input {
              color: @primary-color;
            }
          }
          .search {
            background-color: @primary-color;
            color: @white-color;
            border: none;
          }
        }
      }
      .content-body {
        padding: 30px 64px;
      }
      .content-footer {
        padding: 30px 64px;
      }
    }
  }

  .funs {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 24px;

    .first {
      grid-column-end: 3 span;
    }

    .el-card__header {
      padding-left: 0px;
    }

    .clearfix {
      .title {
        border-left: solid 2px #cb2c21;
        padding-left: 12px;
      }
      .el-button--text {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 22.5px;
        letter-spacing: 0px;
        color: #666666;
      }
    }
    .funs-list {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
      overflow: hidden;

      p {
        height: 30px;
        line-height: 30px;
      }

      .title {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333333;
      }

      .rank {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 25px;
      }

      .rank1 {
        background-color: #df1632;
      }

      .rank2 {
        background-color: #f46a2d;
      }

      .rank3 {
        background-color: #f2ac17;
      }

      .rank4,
      .rank5 {
        background-color: #999999;
      }
    }
  }

  .el-table th > .cell {
    color: @primary-color;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #fbf2f1;
  }
}
</style>
